<template>
  <el-dialog v-model="dialogVisible" align-center width="1015px"   :style="{ ...positionStyle, transform: 'scale(0.6)', transformOrigin: 'top left' }" :modal="false" class="scaled-dialog">
    <el-form>
      <ContentWrap>
        <!-- 搜索工作栏 style="height:auto;align-items:stretch;" -->
        <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
          <el-form-item label="存货编码" prop="inventoryCode">
            <el-input
v-model="queryParams.inventoryCode" placeholder="请输入存货编码" clearable
                      @keyup.enter="handleQuery" class="!w-240px"/>
          </el-form-item>
          <el-form-item label="存货名称" prop="inventoryName">
            <el-input
v-model="queryParams.inventoryName" placeholder="请输入存货名称" clearable
                      @keyup.enter="handleQuery" class="!w-240px"/>
          </el-form-item>
          <el-form-item label="规格型号" prop="inventorySpecModel">
            <el-input
v-model="queryParams.inventorySpecModel" placeholder="请输入规格型号" clearable
                      @keyup.enter="handleQuery" class="!w-240px"/>
          </el-form-item>
          <el-form-item label="批次号" prop="batchCode">
            <el-input
v-model="queryParams.batchCode" placeholder="批次号" clearable
                      @keyup.enter="handleQuery" class="!w-240px"/>
          </el-form-item>
          <el-form-item label="品牌" prop="inventoryBrand">
            <el-input
v-model="queryParams.inventoryBrand" placeholder="请输入品牌" clearable
                      @keyup.enter="handleQuery" class="!w-240px"/>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
            <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
          </el-form-item>
        </el-form>
      </ContentWrap>
      <!-- 列表 -->
      <ContentWrap>
        <el-table
v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"
                  style="height: calc(80vh - 50px - 50px - 35px - 25px)"
                  @row-click="handleRowClick">

          <el-table-column type="selection" width="55"/>
          <el-table-column label="存货编码" align="center" prop="inventoryCode" />
          <el-table-column label="存货名称" align="center" prop="inventoryName" />
          <el-table-column label="规格型号" align="center" prop="inventorySpecModel" />
          <el-table-column label="计量单位" align="center" prop="inventoryUnitName" />
          <el-table-column label="批次号" align="center" prop="batchCode"/>
          <el-table-column label="品牌" align="center" prop="inventoryBrand" />
          <el-table-column label="货位" align="center" prop="locationName" />
          <el-table-column label="总数量" align="center" prop="qty" />
          <el-table-column label="税率" align="center" prop="taxRate" />
        </el-table>
        <!-- 分页 -->
        <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" @pagination="getList"/>
      </ContentWrap>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineEmits, defineProps } from 'vue';
import { InventoryVO, InventoryApi } from '@/api/wms/inventory';
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import { StockApi, StockLogVO } from '@/api/wms/stock'

const selectLoading = ref(false); // 表单的加载中
const inventoryList = ref([] as InventoryVO[]); // 存货列表
const loading = ref(true) // 列表的加载中
const list = ref<InventoryVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  inventoryCode: undefined,
  inventoryName: undefined,
  inventorySpecModel: undefined,
  batchCode: undefined,
  inventoryBrand: undefined,
  saleOrderId:0,
  warehouseId:0
})
const queryFormRef = ref() // 搜索的表单

interface Props {
  initialData?: { inventoryCode: any; };
  saleOrderId:number | 0 
  
  warehouseId:number | 0 

}

const props = defineProps<Props>();

const dialogVisible = ref(false);
const formData = ref({
  stockId: 0,
  inventoryCode: undefined,
  inventoryId: undefined,
  inventoryName: undefined,
  inventoryUnitName: undefined,
  inventorySpecModel: undefined,
  irate: undefined,
  inventoryBrand:undefined,
  quantity:0,
  inQuantity:0,
  sumQty:0,
  price:0,
  itaxprice:0,
  maxQuantity:0,
  batchCode:undefined,
  locationName:undefined,
  kcQuantity:0




});
const emit = defineEmits(['success2']);

const position = reactive({
  x: 0,
  y: 0,
});

const positionStyle = computed(() => ({
  left: `${position.x}px`,
  top: `${position.y}px`,
  position: 'absolute',
}));

const open = (event) => {
  position.x = event.clientX;
  position.y = event.clientY;

  dialogVisible.value = true;
  getList();
};

const handleRowClick = (row: StockLogVO) => {
  // 处理点击行的逻辑
  
  // 可以在这里执行进一步的操作，比如将选中的行保存到 formData 中
  formData.value.stockId = row.id;
  formData.value.inventoryCode = row.inventoryCode; 
  formData.value.inventoryName = row.inventoryName; 
  formData.value.inventoryUnitName = row.inventoryUnitName; 
  formData.value.inventorySpecModel = row.inventorySpecModel; 
  formData.value.inventoryBrand = row.inventoryBrand; 
  formData.value.maxQuantity = row.qty; 
  formData.value.locationName = row.locationName; 
  formData.value.batchCode = row.batchCode; 



  

  console.log('Clicked row data:', formData.value);

  emit('success2', formData.value);
  dialogVisible.value = false; // 关闭弹窗

};





/** 搜索按钮操作 */
const handleQuery = () => {
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 查询列表 */
const getList = async () => {
  loading.value = true
  queryParams.saleOrderId=props.saleOrderId
  queryParams.warehouseId=props.warehouseId
  try {
    const data = await StockApi.findAboutSaleStockLog(queryParams)
    list.value = data
  } finally {
    loading.value = false
  }
}


// 暴露 open 方法给父组件
defineExpose({ open });
</script>